<template>
	<view style="background: #F6F7FB;" class="h-full flex-col">

		<!-- <uv-navbar title="员工列表" :autoBack="true" :placeholder="true" ></uv-navbar> -->

		<div style="height:50rpx" class="flex-shrink-0" v-if="!select"></div>
		<div class="header flex-shrink-0" v-if="!select">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('员工列表')}}
		</div>
		<view class="car_search flex-shrink-0">
			<view class="item" @click="openPickerSearchState">
				<view class="name">
					{{ searchState || $t('当前状态') }}
				</view>
				<uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
			</view>
			<view class="item" @click="openPickerEmplType">
				<view class="name">
					{{ emplType || $t('员工类别') }}
				</view>
				<uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
			</view>
		</view>


		<view class="empl_list flex-1" style="overflow-y: auto;">


			<view class="empl_item" v-for="(item, index) in emplList" :key="index" @click="selectItem(item, index)">
				<view class="flex-start" >
					<div class="mt-25 mr-30" v-if="select">
						<image src="/static/icon/checkbox.png" v-if="!item.checked" mode="widthFix" class="w-30">
						</image>
						<image src="/static/icon/checkbox-s.png" v-else mode="widthFix" class="w-30"></image>
					</div>
					<image class="ico" @click="gotoInfo(item)" v-if="item.attachment"
						:src="item.attachment.path" mode="aspectFill"></image>
					<image class="ico" @click="gotoInfo(item)" v-if="!item.attachment" src="/static/img/ph_head.png"
						mode="aspectFill"></image>

					<view>
						<view class="name" @click="gotoInfo(item)">
							<text>[{{ lang == 'zh' ? get(item, "type_info.title") :
								get(item, "type_info.title_ru") }}]</text>
							{{ lang == 'zh' ? item.title : item.title_ru }}

						</view>

						<div class="flex mt-16" style="width: 100%; flex-wrap: wrap;gap:10rpx">
							<view class="mr-10">
								<view class="org text" v-if="item.state == 1">{{$t('工作中')}}</view>
								<view class="green text" v-if="item.state == 2">{{$t('空闲')}}</view>
								<view class="gray text" v-if="item.state == 3">{{$t('停工')}}</view>
							</view>
							<template v-if="item.car.length > 0">
								<div class="card_bg flex" v-for="(car, index) in item.car" :key="index">
									{{ car.car_number }}<span class="ml-5" v-if="car.trailer_number">{{$t('挂')}}{{ car.trailer_number }}</span>
								</div>
							</template>
							<div class="flex fz22 text-gray-500" v-else>
								<image src="/static/icon/href.png" mode="widthFix" class="w-20 mr-8 mt-4">
								</image>
								{{$t('未绑定车辆')}}
							</div>
						</div>
					</view>
				</view>

				<view class="state" @click.stop="call(item, index)">
					<image src="../../static/icon/phoneIcon.png" mode="" class="w-50 h-50 mr-10"></image>
					<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
				</view>
			</view>
		</view>

		<view class="footer_none"></view>
		<view class="footer_btn flex-shrink-0">
			<navigator class="btn" v-if="!select" url="/pages/employeeAdd/employeeAdd" hover-class="none">
				{{$t('添加员工')}}
			</navigator>
			<div class="btn" v-if="select" @click="confirmSelect">{{$t('确认选择')}}</div>
		</view>

		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirm"></uv-picker>

		<uv-picker ref="pickerSearchState" :columns="columns" keyName="label" @confirm="confirmSearchState"></uv-picker>

		<uv-picker ref="pickerEmplType" :columns="columnsEmplType" keyName="label"
			@confirm="confirmEmplType"></uv-picker>

	</view>
</template>

<script>
import { staff_lists } from '@/api/basic.js'
import { staff_type_select } from '@/api/basic.js'
import { staff_state } from '@/api/basic.js'
import { request_minute } from '@/api/basic'


export default {
	props: ["select"],
	data() {
		return {
			columns: [
				[
					{
						label: this.$t('请选择'),
						id: ''
					},
					{
						label: this.$t('工作中'),
						id: 1
					},
					{
						label: this.$t('空闲'),
						id: 2
					},
					{
						label: this.$t('停工'),
						id: 3
					}
				]
			],
			columnsEmplType: [
				[
					{
						label: '员工类别1',
						id: 1
					},
					{
						label: '员工类别2',
						id: 2
					},
					{
						label: '员工类别3',
						id: 3
					}
				]
			],
			emplList: [

			],
			stateIndex: 0,
			searchState: '',
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			emplType: '',
			lang: 'zh',
			columnsEmplState_id: '',
			columnsEmplType_id: '',
			find_item: {}

		}
	},
	onLoad() {
	},
	onShow() {
	
	},
	created() {
		window.onNativeShow = this.getInfo;
		this.getList();
		this.staffTypeSelect();
		this.lang = uni.getStorageSync('lang')
	},
	onPullDownRefresh() {
		this.getList();
	},
	methods: {
		getInfo(){
			this.getList();
			this.staffTypeSelect();
		},
		confirmSelect() {
			this.$emit('selectUserConfirm', this.emplList.filter(item => item.checked).map(item => item.register_id))
		},
		selectItem(item, index) {
			if (this.select) {
				item.checked = !item.checked
			}
		},
		call(item,index){
			console.log('uni.getStorageSync("user_id")-', uni.getStorageSync("user_id"), item)
			if(uni.getStorageSync("user_id") == item.register_id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: item.register_id,
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: item.register_id,
								type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
				})
			}
			
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		gotoInfo(item) {
			if (this.select) return;
			uni.navigateTo({
				url: '/pages/employeeInfo/employeeInfo?json=' + JSON.stringify(item)
			});
		},
		openPicker(item, index) {
			this.find_item = item
			this.$refs.picker.open();
			this.stateIndex = index
		},
		confirm(e) {
			var val = e.value[0].id;
			this.emplList[this.stateIndex].state = e.value[0].id
			staff_state({ id: this.find_item.id, state: e.value[0].id }).then(res => { })
		},
		openPickerSearchState() {
			this.$refs.pickerSearchState.open();
		},
		confirmSearchState(e) {
			this.columnsEmplState_id = e.value[0].id
			this.searchState = e.value[0].label
			this.getList()
		},
		openPickerEmplType(index) {
			this.$refs.pickerEmplType.open();
		},
		confirmEmplType(e) {
			this.columnsEmplType_id = e.value[0].id
			this.emplType = e.value[0].label
			this.getList()
		},
		getList() {
			var that = this
			var params = {
				user_id: uni.getStorageSync('user_id'),
				'page': 1,
				'limit': 1000,
				'columnsEmplState_id': this.columnsEmplState_id,
				'columnsEmplType_id': this.columnsEmplType_id
			}
			if (this.select) params.no_user = 0;
			staff_lists(params).then(res => {
				uni.stopPullDownRefresh();
				res.data.data.data.forEach(item => {
					item.checked = false
				})
				that.emplList = res.data.data.data
			})
		},
		staffTypeSelect() {
			var that = this
			uni.showLoading({
				title: this.$t('加载中'),
				mask: true
			})
			staff_type_select().then(res => {
				uni.hideLoading()
				var list = res.data.data.data;
				var cou = list.length
				if (this.lang == 'zh') {
					var arr = [{
						label: this.$t('请选择'),
						id: ''
					}]
				} else {
					var arr = [{
						label: 'Выбрать город',
						id: ''
					}]
				}
				for (var i = 0; i < cou; i++) {
					if (this.lang == 'zh') {
						arr.push({
							id: list[i].id,
							label: list[i].title,
						})
					} else {
						arr.push({
							id: list[i].id,
							label: list[i].title_ru,
						})
					}
				}
				that.columnsEmplType = [arr]
			})
		}
	}
}
</script>

<style lang="scss">
.empl_list {
	padding: 0 24rpx;

	.empl_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 24rpx;

		.state {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}

		.card_bg {
			background: url("/static/icon/card_bg.png") no-repeat center center;
			background-size: 100% 100%;
			height: 40rpx;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			padding: 0 20rpx;
			padding-bottom: 3rpx;
			min-width: 130rpx;
		}

		.text {
			font-size: 20rpx;
			text-align: center;
			padding: 5rpx 24rpx;
			width: 120rpx;

			&.org {
				color: #F98A26;
				background-color: #FFECDB;
				border: 2rpx solid #F98A26;
				border-radius: 6rpx;
			}

			&.green {
				color: #06C36E;
				background-color: #E2FFF2;
				border: 2rpx solid #06C36E;
				border-radius: 6rpx;
			}

			&.gray {
				color: #8C8C8C;
				background-color: #F5F5F5;
				border: 2rpx solid #D8D8D8;
				border-radius: 6rpx;
			}
		}

		.ico {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			margin-right: 24rpx;
		}

		.name {
			margin-right: auto;
			font-size: 32rpx;
			line-height: 40rpx;
			color: #333;
			font-weight: bold;
		}
	}
}

page {
	height: 100%;
}

.car_search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 14rpx 24rpx 24rpx;
	border-radius: 0 0 20rpx 20rpx;
	box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.04);
	position: relative;
	z-index: 9;

	.item {
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.name {
			font-size: 24rpx;
			line-height: 40rpx;
		}

		&:first-child {
			width: 180rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		&:last-child {
			width: 100%;
		}
	}
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>
